<template>
  <div>
    <div>
      <el-form :inline="true" @submit.native.prevent>
        <el-form-item>
          <el-input v-model="search" placeholder="请输入院校名称" @keyup.enter.native="handleSearch" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table v-loading="table.loading" :data="table.data" border>
        <el-table-column prop="academy_name" label="院校名称" />
        <!--        <el-table-column prop="mobile" label="手机" />-->
        <!--        <el-table-column prop="name" label="姓名" />-->
        <!--        <el-table-column prop="create_time" label="加入时间" />-->
        <el-table-column label="操作">
          <template slot-scope="t">
            <el-button v-if="t.row.university_users.length === 0" type="success" size="mini" plain @click="handleCreateAdmin(t.row)">创建管理员</el-button>
            <el-button v-if="t.row.university_users.length > 0" type="primary" size="mini" plain @click="handleEditAdmin(t.row)">编辑管理员</el-button>
            <!--            <el-button type="danger" size="mini" @click="handleEditAdmin(t.row)" plain>重置密码</el-button>-->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <WrapPagination>
      <el-pagination
        class="pagination"
        :current-page="table.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="table.size"
        layout="prev, pager, next"
        :total="table.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </WrapPagination>
    <el-dialog title="创建管理员" :visible.sync="createAdmin.visible">
      <Create :academy="academy" @success="handleCreateSuccess" />
    </el-dialog>
    <el-dialog title="编辑管理员" :visible.sync="editAdmin.visible" @close="handleEditClose">
      <!--      <el-tabs :activeName="editAdmin.activeTab">-->
      <!--        <el-tab-pane label="基本信息" name="1"></el-tab-pane>-->
      <!--        <el-tab-pane label="修改密码" name="2">-->
      <!--          <AcademyPassword></AcademyPassword>-->
      <!--        </el-tab-pane>-->
      <!--      </el-tabs>-->
      <el-form ref="form" label-width="100px" :model="editForm" :rules="editFormRules">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="editForm.name" placeholder="请输入姓名" />
        </el-form-item>
        <!--        <el-form-item label="手机" prop="mobile">-->
        <!--          <el-input v-model="editForm.mobile" placeholder="请输入手机号" />-->
        <!--        </el-form-item>-->
        <el-form-item label="密码" prop="password">
          <el-input v-model="editForm.password" placeholder="请输入密码" type="password" />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleEditSubmit">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { TableMixin } from '../../components/mixin'
import { getList, update } from '../../api/academy'
// import { checkPhone } from '../../utils/validate'

export default {
  components: {
    Create: () => import('./create')
    // AcademyPassword: () => import('./components/password'),
  },
  mixins: [TableMixin],
  data() {
    return {
      search: '',
      academy: '',
      user: null,
      createAdmin: {
        visible: false
      },
      editAdmin: {
        visible: false,
        activeTab: '1'
      },
      editForm: {
        name: '',
        password: ''
        // mobile: ''
      },
      editFormRules: {
        name: [
          { required: true, message: '请输入姓名' },
          { min: 2, max: 5, message: '姓名允许2-5个字' }
        ],
        // mobile: [
        //   { required: true, message: '请输入手机号' },
        //   { validator: checkPhone, message: '手机号格式有误' }
        // ],
        password: [
          // { required: true, message: '请输入密码' },
          { min: 6, max: 16, message: '密码长度在6到16之间' }
        ]
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.wrapResourceList(getList, {
        search: this.search
      })
    },
    handleSearch() {
      this.table.page = 1
      this.getList()
    },
    handleEditSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const data = Object.assign({ user_id: this.user.id }, this.editForm)
          update(data).then(() => {
            console.log('')
            // this.$emit('success')
            this.getList()
            this.editAdmin.visible = false
            this.$refs['form'].resetFields()
            this.$message.success('操作成功')
          })
        } else {
          console.log('fail')
          return false
        }
      })
    },
    handleCreateSuccess() {
      this.getList()
      this.createAdmin.visible = false
    },
    handleCreateAdmin(row) {
      console.log(row)
      this.academy = row.academy_code
      this.createAdmin.visible = true
    },
    handleEditAdmin(row) {
      const users = row.university_users
      console.log(users)
      if (users.length !== 0) {
        users.map((v) => {
          v.roles.map((r) => {
            if (r.name === '大学管理员') {
              this.user = v
            }
          })
        })
      }
      this.editAdmin.visible = true
      this.editForm.name = this.user.name
      // this.editForm.mobile = this.user.mobile
    },
    handleEditClose() {
      this.user = {}
      this.editForm.name = ''
      this.editForm.mobile = ''
      // this.$refs['form'].resetFields()
    }
  }
}
</script>
